@import "tailwindcss" source(".");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .overflow-auto > *,
  .overflow-scroll > *,
  .overflow-x-auto > *,
  .overflow-y-auto > * {
    scrollbar-color: auto;
  }

  /* Base style for scrollable elements */
  .overflow-auto,
  .overflow-scroll,
  .overflow-x-auto,
  .overflow-y-auto,
  .overflow-x-scroll,
  .overflow-y-scroll {
    scrollbar-color: rgb(0, 0, 0, 0.1) transparent;

    @media (prefers-color-scheme: dark) {
      scrollbar-color: rgb(255, 255, 255, 0.1) transparent;
    }
  }

  /* Hover state directly on the scrollable element */
  .overflow-auto:hover,
  .overflow-scroll:hover,
  .overflow-x-auto:hover,
  .overflow-y-auto:hover {
    scrollbar-color: rgb(0, 0, 0, 0.2) transparent;

    @media (prefers-color-scheme: dark) {
      scrollbar-color: rgb(255, 255, 255, 0.2) transparent;
    }
  }
}
